<script setup lang="ts">
import { getUserListAPI } from '@/apis/system';
import type { RoleUser, URow } from '@/types/system';
import { onMounted, ref } from 'vue';

const params=ref<RoleUser>({
  page:1,
  pageSize:5,
  name:''
})
const UList= ref<URow[]>([]);
const total=ref<number>()
const buildlist=async ()=>{
  const res=await getUserListAPI(params.value)
  console.log('res',res);
  UList.value=res.data.rows
  total.value=res.data.total
  }

onMounted(()=>{
  buildlist()
})
const searchBuild=()=>{
  buildlist()
  params.value.page=1
}
</script>
<template>
  <div class="park-building-page">
    <div class="search-container">
      <div class="search-label">员工姓名</div>
      <el-input clearable placeholder="请输入内容" v-model="params.name" class="search-main" />
      <el-button type="primary" v-model="params.name" @click="searchBuild">查询</el-button>
    </div>
    <el-button type="primary" >添加员工</el-button>
    <!-- 表格区域 -->
    <el-table :data="UList">
      <el-table-column prop="id" label="序号"></el-table-column>
      <el-table-column prop="name" label="员工姓名"></el-table-column>
      <el-table-column prop="userName" label="登录账号"></el-table-column>
      <el-table-column prop="phonenumber" label="联系方式"></el-table-column>
      <el-table-column prop="roleId" label="角色"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          {{ row.status === 1 ? '启用' : '停用' }}
        </template>
      </el-table-column>
      <el-table-column prop="propertyFeePrice" label="添加时间"></el-table-column>
      <el-table-column prop="address" label="操作" width="300">
        <template #default="{ row }">
          <el-button text type="primary" >编辑</el-button>
          <el-button text >删除</el-button>
          <el-button text >重置密码</el-button>
        </template>
         </el-table-column>
    </el-table>
    <el-pagination
        :total="total"
        :page-sizes="[2, 3, 4, 5]"
        layout="total,sizes, prev, pager, next,jumper"
        v-model:current-page="params.page"
        v-model:page-size="params.pageSize"
        @change="buildlist"
      />
  </div>
</template>

<style lang="scss" scoped>
.park-building-page {
  height: 100%;
  padding: 20px;
}
.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;

  .search-label {
    width: 80px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.el-button {
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
